<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.SelectBox - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="selected">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.SelectBox 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_6a586bd6ae227a6ba2d98c96e8b06af1">기능과 동작 방식</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_cbd30bb38edc7ffc879aabd5f479a2c7">기본 초기화 형태</a>
		                    </li>
		                
		            </ul>
		        

		        
		            <h3><a href="#demo">데모</a></h3>
		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors extends">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.SelectBox">
		                            SelectBox
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods extends">
		                
		                    <li class=" inherited-item">
		                        <a href="#method_activate" title="컴포넌트를&nbsp;활성화한다.
_onActivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onActivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            activate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_attach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.">
		                            attach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_close" title="레이어를&nbsp;닫는다.">
		                            close()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_deactivate" title="컴포넌트를&nbsp;비활성화한다.
_onDeactivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onDeactivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            deactivate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detachAll" title="등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detachAll()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_disable" title="SelectBox를&nbsp;disable&nbsp;시킨다.
마우스로&nbsp;클릭하더라도&nbsp;목록&nbsp;레이어가&nbsp;펼쳐지지&nbsp;않는다.">
		                            disable()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_enable" title="SelectBox를&nbsp;enable&nbsp;시킨다.">
		                            enable()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_fireEvent" title="이벤트를&nbsp;발생시킨다.">
		                            fireEvent()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getBoxElement" title="box&nbsp;엘리먼트(클래스명&nbsp;&quot;box&quot;)를&nbsp;가져온다.">
		                            getBoxElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getDisabled" title="셀렉트박스가&nbsp;disabled&nbsp;되었는지&nbsp;여부를&nbsp;가져온다.">
		                            getDisabled()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getHTML" title="Select의&nbsp;html를&nbsp;가져온다.
옵션의&nbsp;aOptionHTML을&nbsp;설정한&nbsp;경우에&nbsp;리턴&nbsp;값을&nbsp;가진다.">
		                            getHTML()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getLabelElement" title="label&nbsp;엘리먼트(클래스명&nbsp;&quot;label&quot;)를&nbsp;가져온다.">
		                            getLabelElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getLayerElement" title="layer&nbsp;엘리먼트(클래스명&nbsp;&quot;layer&quot;)를&nbsp;가져온다.">
		                            getLayerElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getLayerManager" title="LayerManager&nbsp;객체를&nbsp;가져온다.">
		                            getLayerManager()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getLayerPosition" title="LayerPosition&nbsp;객체를&nbsp;가져온다.">
		                            getLayerPosition()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getListElement" title="list&nbsp;엘리먼트(클래스명&nbsp;&quot;list&quot;)를&nbsp;가져온다.">
		                            getListElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getListItems" title="List내의&nbsp;아이템&nbsp;엘리먼트(li)들을&nbsp;가져온다.">
		                            getListItems()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getOptions" title="Select의&nbsp;option&nbsp;엘리먼트들을&nbsp;가져온다.">
		                            getOptions()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getRolloverClick" title="RolloverClick&nbsp;객체를&nbsp;가져온다.">
		                            getRolloverClick()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getSelectElement" title="select&nbsp;엘리먼트를&nbsp;가져온다.">
		                            getSelectElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getSelectListElement" title="list&nbsp;엘리먼트&nbsp;내부의&nbsp;실제&nbsp;목록&nbsp;ul&nbsp;엘리먼트를&nbsp;가져온다.">
		                            getSelectListElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getSelectedIndex" title="선택된&nbsp;index를&nbsp;가져온다.">
		                            getSelectedIndex()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getText" title="Select의&nbsp;text를&nbsp;가져온다.">
		                            getText()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getValue" title="Select의&nbsp;value를&nbsp;가져온다.">
		                            getValue()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getValueOf" title="text&nbsp;값에&nbsp;대한&nbsp;option의&nbsp;value를&nbsp;가져온다.">
		                            getValueOf()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_isActivating" title="컴포넌트의&nbsp;활성여부를&nbsp;가져온다.">
		                            isActivating()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_isLayerOpened" title="Select&nbsp;레이어가&nbsp;열려있는지&nbsp;여부를&nbsp;가져온다.">
		                            isLayerOpened()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_isSelected" title="선택된&nbsp;값이&nbsp;있는지&nbsp;여부를&nbsp;가져온다.
Default&nbsp;옵션이&nbsp;선택된&nbsp;경우에&nbsp;false를&nbsp;리턴한다.">
		                            isSelected()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_open" title="레이어를&nbsp;연다.">
		                            open()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;가져온다.">
		                            option()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_paint" title="셀렉트박스를&nbsp;다시&nbsp;그린다.">
		                            paint()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setDefault" title="선택된&nbsp;값을&nbsp;초기화하여&nbsp;default&nbsp;값으로&nbsp;되돌린다.">
		                            setDefault()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setOptionGroup" title="보여질&nbsp;옵션&nbsp;그룹을&nbsp;설정한다.
source&nbsp;엘리먼트&nbsp;내에&nbsp;&amp;lt;option&nbsp;class=&quot;selectbox-default&quot;&amp;gt;&nbsp;엘리먼트가&nbsp;선언되어있어야한다.
옵션&nbsp;그룹을&nbsp;설정하기&nbsp;위해&nbsp;기본으로&nbsp;설정된&nbsp;source-option-group&nbsp;셀렉트&nbsp;엘리먼트가&nbsp;선언되어있어야한다.&nbsp;
option&nbsp;중&nbsp;지정된&nbsp;옵션&nbsp;그룹명(option-group-그룹명)을&nbsp;가진&nbsp;엘리먼트만&nbsp;보여진다.">
		                            setOptionGroup()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setSelectedIndex" title="nIndex번째&nbsp;옵션을&nbsp;선택한다.
disabled&nbsp;된것에&nbsp;대해&nbsp;처리한다.">
		                            setSelectedIndex()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setValue" title="SelectBox의&nbsp;value를&nbsp;설정한다.">
		                            setValue()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		            <h3><a href="#event">이벤트</a></h3>
		
		            <ul class="events extends">
		                
		                    <li class="">
		                        <a href="#event_blur" title="셀렉트박스가&nbsp;포커스를&nbsp;잃으면&nbsp;발생">
		                            blur
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_change" title="선택한&nbsp;아이템이&nbsp;바뀌었을때&nbsp;발생">
		                            change
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_click" title="아이템을&nbsp;클릭하면&nbsp;발생">
		                            click
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_close" title="레이어가&nbsp;닫히기&nbsp;직전&nbsp;발생">
		                            close
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_focus" title="셀렉트박스가&nbsp;포커스를&nbsp;얻으면&nbsp;발생">
		                            focus
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_open" title="레이어가&nbsp;열리기&nbsp;직전&nbsp;발생">
		                            open
		                            
		                            
		                        </a>   
		                    </li>
		                
		            </ul>
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		SelectBox
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.SelectBox
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l5" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    
	        <dt>상속</dt>
	        <dd>
	        	<a href="..\classes\jindo.HTMLComponent.html" class="crosslink">jindo.HTMLComponent</a>
	        	<span class="arrow">→</span><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a><span class="arrow">→</span><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
	        </dd>
	    

	    
		
	    
		<dt>사용</dt>
		<dd><a href="..\classes\jindo.Timer.html" class="crosslink">jindo.Timer</a>, <a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a>, <a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>, <a href="..\classes\jindo.RolloverClick.html" class="crosslink">jindo.RolloverClick</a></dd>
		
		
	    
		
		</dl>

		
		
		<div class="description"><p>HTML Select 엘리먼트를 대체하여 디자인을 적용하는 컴포넌트</p></div>
		
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.SelectBox" class="name">jindo.SelectBox</a>
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
 
						<p><p>SelectBox 컴포넌트를 초기화한다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
			</tbody>
			</table>
		

        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_activate" class="name">activate</a>
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_attach" class="name">attach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 등록한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_close" class="name">close</a>
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>레이어를 닫는다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_deactivate" class="name">deactivate</a>
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detach" class="name">detach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detachAll" class="name">detachAll</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_disable" class="name">disable</a>
( )
 
						<p><p>SelectBox를 disable 시킨다.
마우스로 클릭하더라도 목록 레이어가 펼쳐지지 않는다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_enable" class="name">enable</a>
( )
 
						<p><p>SelectBox를 enable 시킨다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_fireEvent" class="name">fireEvent</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>이벤트를 발생시킨다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getBoxElement" class="name">getBoxElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>box 엘리먼트(클래스명 "box")를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getDisabled" class="name">getDisabled</a>
( )
 
						<p><p>셀렉트박스가 disabled 되었는지 여부를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getHTML" class="name">getHTML</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>
 
						<p><p>Select의 html를 가져온다.
옵션의 aOptionHTML을 설정한 경우에 리턴 값을 가진다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getLabelElement" class="name">getLabelElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>label 엘리먼트(클래스명 "label")를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getLayerElement" class="name">getLayerElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>layer 엘리먼트(클래스명 "layer")를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getLayerManager" class="name">getLayerManager</a>
( )
:<a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a>
 
						<p><p>LayerManager 객체를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getLayerPosition" class="name">getLayerPosition</a>
( )
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
						<p><p>LayerPosition 객체를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getListElement" class="name">getListElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>list 엘리먼트(클래스명 "list")를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getListItems" class="name">getListItems</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>
 
						<p><p>List내의 아이템 엘리먼트(li)들을 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getOptions" class="name">getOptions</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>
 
						<p><p>Select의 option 엘리먼트들을 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getRolloverClick" class="name">getRolloverClick</a>
( )
:<a href="..\classes\jindo.RolloverClick.html" class="crosslink">jindo.RolloverClick</a>
 
						<p><p>RolloverClick 객체를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getSelectElement" class="name">getSelectElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>select 엘리먼트를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getSelectListElement" class="name">getSelectListElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>list 엘리먼트 내부의 실제 목록 ul 엘리먼트를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getSelectedIndex" class="name">getSelectedIndex</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>선택된 index를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getText" class="name">getText</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>
 
						<p><p>Select의 text를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getValue" class="name">getValue</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>
 
						<p><p>Select의 value를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getValueOf" class="name">getValueOf</a>
(sText:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>
 
						<p><p>text 값에 대한 option의 value를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_isActivating" class="name">isActivating</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트의 활성여부를 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_isLayerOpened" class="name">isLayerOpened</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
						<p><p>Select 레이어가 열려있는지 여부를 가져온다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_isSelected" class="name">isSelected</a>
( )
 
						<p><p>선택된 값이 있는지 여부를 가져온다.
Default 옵션이 선택된 경우에 false를 리턴한다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_open" class="name">open</a>
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>레이어를 연다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션 값을 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_paint" class="name">paint</a>
( )
 
						<p><p>셀렉트박스를 다시 그린다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setDefault" class="name">setDefault</a>
( )
 
						<p><p>선택된 값을 초기화하여 default 값으로 되돌린다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setOptionGroup" class="name">setOptionGroup</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
						<p><p>보여질 옵션 그룹을 설정한다.
source 엘리먼트 내에 &lt;option class="selectbox-default"&gt; 엘리먼트가 선언되어있어야한다.
옵션 그룹을 설정하기 위해 기본으로 설정된 source-option-group 셀렉트 엘리먼트가 선언되어있어야한다. 
option 중 지정된 옵션 그룹명(option-group-그룹명)을 가진 엘리먼트만 보여진다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setSelectedIndex" class="name">setSelectedIndex</a>
(nIndex:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
 
						<p><p>nIndex번째 옵션을 선택한다.
disabled 된것에 대해 처리한다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setValue" class="name">setValue</a>
(sValue:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
 
						<p><p>SelectBox의 value를 설정한다.</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
			</tbody>
			</table>
        

        
			<h2 class="noline">이벤트</h2>
			
			<table class="tbl_board">
			<caption class="hide">이벤트</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">이벤트</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_blur" class="name">blur</a>
						<p><p>셀렉트박스가 포커스를 잃으면 발생</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_change" class="name">change</a>
						<p><p>선택한 아이템이 바뀌었을때 발생</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_click" class="name">click</a>
						<p><p>아이템을 클릭하면 발생</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_close" class="name">close</a>
						<p><p>레이어가 닫히기 직전 발생</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_focus" class="name">focus</a>
						<p><p>셀렉트박스가 포커스를 얻으면 발생</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_open" class="name">open</a>
						<p><p>레이어가 열리기 직전 발생</p></p>
					</td>
					<td>jindo.SelectBox</td>
					</tr>
	            
			</tbody>
			</table>
        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_6a586bd6ae227a6ba2d98c96e8b06af1" class="manual item">
				    <h3>기능과 동작 방식</h3>
				    <div class="description"><p>SelectBox 컴포넌트는 HTML의 select 엘리먼트의 디자인을 대체 적용하는 컴포넌트이다.</p>

<p>일반적으로 select 엘리먼트의 스타일을 css로 변경하는 데는 한계가 있다.
따라서 HTMLComponent를 상속하여 사용자의 인터랙션을 처리하는 UI를 아래의 그림과 같이 따로 구성하여 CSS로 스타일을 지정할 수 있게 한다. </p>

<h5>표준 Select</h5>

<p><img src="..\..\..\resource/jindo.SelectBox/SelectBox-standard.png" alt="" title="" /></p>

<h5>진도 SelectBox 컴포넌트</h5>

<p><img src="..\..\..\resource/jindo.SelectBox/SelectBox-design.png" alt="" title="" /></p>

<p>SelectBox 컴포넌트는 optgroup을 설정하지 않은 size=1인 HTML Select 엘리먼트의 동작방식과 동일하다.
SelectBox가 적용되면 select 엘리먼트와 마찬가지로 Tab 이동에 의해서 포커스되고 HTML Select 엘리먼트와 동일한 키 컨트롤이 가능하다. </p>

<p>select엘리먼트와 다르게 다시 선택할 수 없는 디폴트 값을 설정할 수 있고, 실제 select내의
option으로 존재하지만 선택할 수 없도록 목록에 표시하지 않을 수 있으며, 목록에 표시는 되지만 선택 되지 않게 할 수도 있다. </p>

<p>또한 특정 브라우저에서 select 엘리먼트와 Flash 오브젝트가 겹치는 오류가 발생하는데 이런 문제를 쉽게 해결하도록 해준다.</p>

<h4>동작 방식</h4>

<p>SelectBox 컴포넌트를 적용하기 위한 HTML 구조는 다음과 같다.</p>

<pre class="code"><code class="prettyprint">&lt;div class="selectbox-noscript"&gt; &lt;!-- 기준 엘리먼트 --&gt;
    &lt;select class="selectbox-source"&gt; &lt;!-- HTML Select 엘리먼트 --&gt;
        &lt;option class="selectbox-default"&gt;선택하세요&lt;/option&gt; &lt;!-- 디폴트 선택항목 (다시 선택할 수 없음) --&gt;
        &lt;option value="1"&gt;1&lt;/option&gt; &lt;!-- 일반적인 선택항목 --&gt;
        &lt;option value="2"&gt;2&lt;/option&gt;
        &lt;option value="3"&gt;3&lt;/option&gt;
        &lt;option value="4"&gt;4&lt;/option&gt;
        &lt;option value="5" class="selectbox-invisible"&gt;이건안보여요&lt;/option&gt; &lt;!-- 선택목록에 노출되지 않는 항목 --&gt;
        &lt;option disabled="disabled"&gt;------------------&lt;/option&gt; &lt;!-- 선택목록에는 노출되지만 선택할 수 없는 항목 --&gt;
        &lt;option value="6"&gt;6&lt;/option&gt;
        &lt;option value="7"&gt;7&lt;/option&gt;
        &lt;option value="8"&gt;8&lt;/option&gt;
        &lt;option value="9"&gt;9&lt;/option&gt;
        &lt;option value="10" class="selectbox-notclose"&gt;10&lt;/option&gt; &lt;!-- 선택되어도 선택목록이 닫히지 않는 항목 --&gt;
    &lt;/select&gt;
    &lt;div class="selectbox-box"&gt; &lt;!-- 박스 엘리먼트 --&gt;
        &lt;div class="selectbox-label"&gt;&lt;/div&gt; &lt;!-- 레이블 엘리먼트 --&gt;
    &lt;/div&gt;
    &lt;div class="selectbox-layer"&gt; &lt;!-- 레이어 엘리먼트 --&gt;
        &lt;div class="selectbox-list"&gt;&lt;/div&gt; &lt;!-- 목록 엘리먼트 --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>컴포넌트가 초기화되면 기준엘리먼트의 [prefix]noscript 클래스명이 제거되고, 레이블 엘리먼트에 디폴트 선택항목이 설정되며,
HTML Select 엘리먼트 내부의 선택항목 option 엘리먼트의 정보를 토대로 목록 엘리먼트가 다음과 같은 형태로 변경된다.</p>

<pre class="code"><code class="prettyprint">&lt;div&gt; &lt;!-- 기준엘리먼트 noscript 클래스명 제거--&gt;
    &lt;select class="selectbox-source"&gt; &lt;!-- HTML Select 엘리먼트 --&gt;
        ...
    &lt;/select&gt;
    &lt;div class="selectbox-box"&gt; &lt;!-- 박스 엘리먼트 --&gt;
        &lt;div class="selectbox-label"&gt;선택하세요&lt;/div&gt; &lt;!-- 레이블 엘리먼트 --&gt;
    &lt;/div&gt;
    &lt;div class="selectbox-layer"&gt;
        &lt;div class="selectbox-list"&gt; &lt;!-- 목록 엘리먼트 --&gt;
            &lt;ul&gt;
                &lt;li class="selectbox-item"&gt;1&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;2&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;3&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;4&lt;/li&gt;
                &lt;li class="selectbox-item-disabled"&gt;------------------&lt;/li&gt; &lt;!-- 선택할 수 없는 항목 --&gt;
                &lt;li class="selectbox-item"&gt;6&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;7&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;8&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;9&lt;/li&gt;
                &lt;li class="selectbox-item selectbox-notclose"&gt;10&lt;/li&gt; &lt;!-- 선택되어도 선택목록이 닫히지 않는 항목 --&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>컴포넌트가 초기화되면 다음과 같이 변한다.</p>

<ul>
<li>목록 엘리먼트 내부에 ul 엘리먼트가 추가되고 select의 option엘리먼트들중 화면에 보여질 엘리먼트들만 li 엘리먼트로 추가된다.</li>
<li>option 엘리먼트에 적용된 style 속성 값과 클래스명은 모두 li 엘리먼트에 복사된다.</li>
<li>목록의 아이템들은 [prefix]item 클래스명을 가지고 선택될수 없는 아이템은 [prefix]item-disabled 클래스명을 가진다.</li>
<li>선택된 아이템에는 [prefix]item-selected, 마우스오버된 아이템에는 [prefix]item-over 클래스명이 추가된다.</li>
<li>tab이동으로 select에 포커스가 주어지거나 셀렉트박스를 클릭할 경우 기준 엘리먼트에 [prefix]focused 클래스명이 추가된다.</li>
<li>셀렉트박스가 disabled 되면 기준 엘리먼트에 [prefix]disabled 클래스명이 추가된다.</li>
</ul>

<h4>Note</h4>

<ul>
<li>select에 size속성을 선언하지 않아야한다. (항상 size="1")</li>
<li>optgroup을 설정할 수 없고 단일 선택만 가능하다.</li>
</ul></div>
				</div>
            
				<div id="manual_cbd30bb38edc7ffc879aabd5f479a2c7" class="manual item">
				    <h3>기본 초기화 형태</h3>
				    <div class="description"><h4>HTML</h4>

<pre class="code"><code class="prettyprint">&lt;div class="selectbox-noscript"&gt; &lt;!-- 기준 엘리먼트 --&gt;
    &lt;select class="selectbox-source"&gt; &lt;!-- HTML Select 엘리먼트 --&gt;
        &lt;option class="selectbox-default"&gt;선택하세요&lt;/option&gt; &lt;!-- 디폴트 선택항목 (다시 선택할 수 없음) --&gt;
        &lt;option value="1"&gt;1&lt;/option&gt; &lt;!-- 일반적인 선택항목 --&gt;
        &lt;option value="2"&gt;2&lt;/option&gt;
        &lt;option value="3"&gt;3&lt;/option&gt;
        &lt;option value="4"&gt;4&lt;/option&gt;
        &lt;option value="5" class="selectbox-invisible"&gt;이건안보여요&lt;/option&gt; &lt;!-- 선택목록에 노출되지 않는 항목 --&gt;
        &lt;option disabled="disabled"&gt;------------------&lt;/option&gt; &lt;!-- 선택목록에는 노출되지만 선택할 수 없는 항목 --&gt;
        &lt;option value="6"&gt;6&lt;/option&gt;
        &lt;option value="7"&gt;7&lt;/option&gt;
        &lt;option value="8"&gt;8&lt;/option&gt;
        &lt;option value="9"&gt;9&lt;/option&gt;
        &lt;option value="10" class="selectbox-notclose"&gt;10&lt;/option&gt; &lt;!-- 선택되어도 선택목록이 닫히지 않는 항목 --&gt;
    &lt;/select&gt;
    &lt;div class="selectbox-box"&gt; &lt;!-- 박스 엘리먼트 --&gt;
        &lt;div class="selectbox-label"&gt;&lt;/div&gt; &lt;!-- 레이블 엘리먼트 --&gt;
    &lt;/div&gt;
    &lt;div class="selectbox-layer"&gt; &lt;!-- 레이어 엘리먼트 --&gt;
        &lt;div class="selectbox-list"&gt;&lt;/div&gt; &lt;!-- 목록 엘리먼트 --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<ul>
<li>기준 엘리먼트 div는 로드되기전 [prefix]noscript 클래스명을 갖는다.</li>
<li>기준 엘리먼트는 [prefix]source 클래스명을 가지는 select 엘리먼트를 포함한다.</li>
<li>select 엘리먼트의 option 엘리먼트중 기본으로 보이고 싶은 엘리먼트에 [prefix]default 클래스명을 선언한다.</li>
<li>select 엘리먼트의 option 엘리먼트중 보이고 싶지 않은 엘리먼트에 [prefix]invisible 클래스명을 선언한다.</li>
<li>select 엘리먼트의 option 엘리먼트중 보이지만 선택할 수 없는 엘리먼트에 속성 disabled="disabled"을 선언한다.</li>
<li>select 엘리먼트의 option 엘리먼트중 선택할 수 있지만 클릭하여도 목록 레이어가 닫히지 않게 하려면 엘리먼트에 [prefix]notclose 클래스명을 선언한다.</li>
<li>모든 option 엘리먼트는 default, disabled를 제외하고는 모두 유일한 value 값을 가져야 한다.</li>
<li>기준 엘리먼트는 [prefix]box 클래스명을 가지는 박스엘리먼트를 포함한다.</li>
<li>박스 엘리먼트 내에 기본으로 보여질 텍스트 영역이 될 [prefix]label 클래스명을 가지는 레이블 엘리먼트를 포함한다.</li>
<li>기준 엘리먼트는 레이어가 그려질 [prefix]layer 클래스명을 가지는 레이어 엘리먼트를 포함한다.</li>
<li>레이어 엘리먼트는 목록이 그려질 [prefix]list 클래스명을 가지는 목록엘리먼트를 포함한다.</li>
</ul>

<h4>CSS</h4>

<pre class="code"><code class="prettyprint">.selectbox-noscript * { display:none; }
.selectbox-noscript .selectbox-source { display:inline; position:relative; left:0;}
.selectbox-noscript .selectbox-source * { display:block; }

.selectbox-source { position:absolute; left:-9999px;}
.selectbox-focused .selectbox-box { border-color:green; }
.selectbox-disabled .selectbox-box { border-color:gray; }

.selectbox-box { border:3px solid yellowgreen; width:200px; cursor:default; }
.selectbox-label { padding:3px; }
.selectbox-layer { display:none; position:absolute; border:3px solid blue; width:200px; background-color:#eee;  }
.selectbox-list ul { list-style:none; margin:0; padding:0; }

.selectbox-list ul li { padding:3px; cursor:default; color:#888; background-color:#eee; zoom:1; }
.selectbox-list ul li.selectbox-item-selected { color:#000; font-weight:bold; }
.selectbox-list ul li.selectbox-item-over { background-color:#aaa !important; }
</code></pre>

<h4>JavaScript</h4>

<pre class="code"><code class="prettyprint">//include jindo.Componenet.js
//include jindo.UIComponent.js
//include jindo.HTMLComponent.js
//include jindo.RolloverArea.js
//include jindo.RolloverClick.js
//include jindo.Timer.js
//include jindo.LayerManager.js
//include jindo.LayerPosition.js
//include jindo.SelectBox.js

var oSelectBox = new jindo.SelectBox(jindo.$("select"));
</code></pre></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.SelectBox" class="constructor item">
	<h3>jindo.SelectBox()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l25" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.SelectBox
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])</code></div>
	<div class="description"><p>SelectBox 컴포넌트를 초기화한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준엘리먼트</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">옵션 객체</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name optional">sClassPrefix</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;selectbox-&quot;)</span>
    

    

    <p class="description">Default Class Prefix. 컴포넌트에 의해 처리되는 클래스명의 앞에 붙을 접두어.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nWidth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : null)</span>
    

    

    <p class="description">가로 사이즈, null시 자동</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nHeight</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : null)</span>
    

    

    <p class="description">목록의 최대 높이. 지정한 값보다 커지면 스크롤 생김, null시 자동</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">bUseLayerPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">LayerPosition 컴포넌트로 위치 설정할지 여부. true지정시 layer엘리먼트가 document.body로 append된다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">aOptionHTML</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
        <span class="default">(기본값 : [])</span>
    

    

    <p class="description">목록에서 option 내부에 html을 적용하고 싶을 경우 option 엘리먼트의 개수에 맞게 값을 설정한다. 배열의 각 요소는 html 문자열형태이어야한다. null 값 지정시 option 엘리먼트에 지정된 text명과 동일하게 표현된다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">aOptionLabel</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
        <span class="default">(기본값 : [])</span>
    

    

    <p class="description">aOptionHTML이 설정된 option이 선택된 경우에 레이블영역에 보여질 html내용. 배열의 각 요소는 문자열형태이어야한다. null 값 지정시 aOptionHTML과 동일하게 표현된다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">LayerPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">목록 레이어의 위치조절을 위한 jindo.LayerPosition 컴포넌트에 적용될 옵션</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">LayerManager</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">목록 레이어의 노출조절을 위한 jindo.LayerManager 컴포넌트에 적용될 옵션</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">var oSelectBox = new jindo.SelectBox(jindo.$("select"), {
aOptionHTML : [
    null,
    "&lt;div&gt;a&lt;/div&gt;",
    "&lt;div&gt;&lt;input type='text'&gt;&lt;/div&gt;"
]});
</code></pre><pre class="code"><code class="prettyprint">var oSelectBox = new jindo.SelectBox(jindo.$("select"), {
aOptionHTML : [
    null,
    "&lt;div&gt;a&lt;/div&gt;",
    "&lt;div&gt;&lt;input type='text'&gt;&lt;/div&gt;"
    ],
aOptionLabel : [
    null,
    null,
    "직접입력"
]});
</code></pre>
            </div>
        </div>
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_activate" class="method item inherited-item">
	<h3>activate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>activate
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></code></div>
	<div class="description"><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_attach" class="method item inherited-item">
	<h3>attach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l253" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 등록한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">fHandlerToAttach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 할 커스텀 이벤트 핸들러</p>

	
	
    
        <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">oCustomEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 객체</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 등록 방법 예제
//아래처럼 등록하면 appear 라는 사용자 이벤트 핸들러는 총 3개가 등록되어 해당 이벤트를 발생시키면 각각의 핸들러 함수가 모두 실행됨.
//attach 을 통해 등록할때는 이벤트명에 'on' 이 빠지는 것에 유의.
function fpHandler1(oEvent) { .... };
function fpHandler2(oEvent) { .... };

var oInst = new MyComponent();
oInst.onappear = fpHandler1; // 직접 등록
oInst.attach('appear', fpHandler1); // attach 함수를 통해 등록
oInst.attach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_close" class="method item">
	<h3>close()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l985" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>close
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></code></div>
	<div class="description"><p>레이어를 닫는다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_deactivate" class="method item inherited-item">
	<h3>deactivate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l55" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>deactivate
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></code></div>
	<div class="description"><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detach" class="method item inherited-item">
	<h3>detach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l297" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">fHandlerToDetach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 해제 할 커스텀 이벤트 핸들러</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 해제 예제
oInst.onappear = null; // 직접 해제
oInst.detach('appear', fpHandler1); // detach 함수를 통해 해제
oInst.detach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachAll" class="method item inherited-item">
	<h3>detachAll()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l335" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachAll
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></code></div>
	<div class="description"><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">이벤트명. 생략시 모든 등록된 커스텀 이벤트 핸들러를 해제한다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//"show" 커스텀 이벤트 핸들러 모두 해제
oInst.detachAll("show");

//모든 커스텀 이벤트 핸들러 해제
oInst.detachAll();
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_disable" class="method item">
	<h3>disable()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l946" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>disable
( )</code></div>
	<div class="description"><p>SelectBox를 disable 시킨다.
마우스로 클릭하더라도 목록 레이어가 펼쳐지지 않는다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_enable" class="method item">
	<h3>enable()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l960" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>enable
( )</code></div>
	<div class="description"><p>SelectBox를 enable 시킨다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_fireEvent" class="method item inherited-item">
	<h3>fireEvent()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l180" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>fireEvent
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>이벤트를 발생시킨다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 핸들러에 전달되는 객체.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">핸들러의 커스텀 이벤트객체에서 stop메서드가 수행되면 false를 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트를 발생시키는 예제
var MyComponent = jindo.$Class({
    method : function() {
        this.fireEvent('happened', {
            sHello : 'world',
            nAbc : 123
        });
    }
}).extend(jindo.Component);

var oInst = new MyComponent().attach({
    happened : function(oCustomEvent) {
        alert(oCustomEvent.sHello + '/' + oCustomEvent.nAbc); // 결과 : world/123
    }
});

&lt;button onclick="oInst.method();"&gt;Click me&lt;/button&gt; 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getBoxElement" class="method item">
	<h3>getBoxElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l141" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getBoxElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>box 엘리먼트(클래스명 "box")를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getDisabled" class="method item">
	<h3>getDisabled()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l595" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getDisabled
( )</code></div>
	<div class="description"><p>셀렉트박스가 disabled 되었는지 여부를 가져온다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getHTML" class="method item">
	<h3>getHTML()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l504" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getHTML
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></code></div>
	<div class="description"><p>Select의 html를 가져온다.
옵션의 aOptionHTML을 설정한 경우에 리턴 값을 가진다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getLabelElement" class="method item">
	<h3>getLabelElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l151" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getLabelElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>label 엘리먼트(클래스명 "label")를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getLayerElement" class="method item">
	<h3>getLayerElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l161" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getLayerElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>layer 엘리먼트(클래스명 "layer")를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getLayerManager" class="method item">
	<h3>getLayerManager()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l305" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getLayerManager
( )
:<a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a></code></div>
	<div class="description"><p>LayerManager 객체를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getLayerPosition" class="method item">
	<h3>getLayerPosition()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l409" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getLayerPosition
( )
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>LayerPosition 객체를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getListElement" class="method item">
	<h3>getListElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l171" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getListElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>list 엘리먼트(클래스명 "list")를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getListItems" class="method item">
	<h3>getListItems()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l585" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getListItems
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></code></div>
	<div class="description"><p>List내의 아이템 엘리먼트(li)들을 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getOptions" class="method item">
	<h3>getOptions()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l575" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getOptions
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></code></div>
	<div class="description"><p>Select의 option 엘리먼트들을 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getRolloverClick" class="method item">
	<h3>getRolloverClick()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l395" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getRolloverClick
( )
:<a href="..\classes\jindo.RolloverClick.html" class="crosslink">jindo.RolloverClick</a></code></div>
	<div class="description"><p>RolloverClick 객체를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.RolloverClick.html" class="crosslink">jindo.RolloverClick</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getSelectElement" class="method item">
	<h3>getSelectElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l131" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getSelectElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>select 엘리먼트를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getSelectListElement" class="method item">
	<h3>getSelectListElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l181" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getSelectListElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>list 엘리먼트 내부의 실제 목록 ul 엘리먼트를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getSelectedIndex" class="method item">
	<h3>getSelectedIndex()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l527" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getSelectedIndex
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>선택된 index를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getText" class="method item">
	<h3>getText()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l493" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getText
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></code></div>
	<div class="description"><p>Select의 text를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getValue" class="method item">
	<h3>getValue()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l482" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getValue
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></code></div>
	<div class="description"><p>Select의 value를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getValueOf" class="method item">
	<h3>getValueOf()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l466" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getValueOf
(sText:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></code></div>
	<div class="description"><p>text 값에 대한 option의 value를 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sText</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">text 값</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isActivating" class="method item inherited-item">
	<h3>isActivating()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l23" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isActivating
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>컴포넌트의 활성여부를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isLayerOpened" class="method item">
	<h3>isLayerOpened()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l936" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isLayerOpened
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>Select 레이어가 열려있는지 여부를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isSelected" class="method item">
	<h3>isSelected()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l711" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isSelected
( )</code></div>
	<div class="description"><p>선택된 값이 있는지 여부를 가져온다.
Default 옵션이 선택된 경우에 false를 리턴한다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_open" class="method item">
	<h3>open()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l972" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>open
( )
:<a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></code></div>
	<div class="description"><p>레이어를 연다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.SelectBox.html" class="crosslink">jindo.SelectBox</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item inherited-item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></code></div>
	<div class="description"><p>옵션 값을 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
	<p class="description">옵션의 값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item inherited-item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l126" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
	<p class="description">setter 함수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_paint" class="method item">
	<h3>paint()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l746" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>paint
( )</code></div>
	<div class="description"><p>셀렉트박스를 다시 그린다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setDefault" class="method item">
	<h3>setDefault()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l721" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setDefault
( )</code></div>
	<div class="description"><p>선택된 값을 초기화하여 default 값으로 되돌린다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setOptionGroup" class="method item">
	<h3>setOptionGroup()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l604" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setOptionGroup
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>보여질 옵션 그룹을 설정한다.
source 엘리먼트 내에 &lt;option class="selectbox-default"&gt; 엘리먼트가 선언되어있어야한다.
옵션 그룹을 설정하기 위해 기본으로 설정된 source-option-group 셀렉트 엘리먼트가 선언되어있어야한다. 
option 중 지정된 옵션 그룹명(option-group-그룹명)을 가진 엘리먼트만 보여진다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션 그룹 명</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">설정 완료 여부</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">&lt;!-- 수행 전 구조 --&gt;
&lt;div&gt;
    &lt;select class="selectbox-source"&gt;
        &lt;option value="0" class="selectbox-default"&gt;팀을 선택하세요&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class="selectbox-source-option-group"&gt; &lt;!--옵션 그룹을 설정하기 위한 보이지 않는 select--&gt;
        &lt;option value="1" class="selectbox-option-group-1"&gt;Ajax UI1팀&lt;/option&gt;
        &lt;option value="2" class="selectbox-option-group-1"&gt;Ajax UI2팀&lt;/option&gt;
        &lt;option value="3" class="selectbox-option-group-1"&gt;Ajax UI3팀&lt;/option&gt;
        &lt;option value="4" class="selectbox-option-group-1"&gt;Ajax UI4팀&lt;/option&gt;
        &lt;option disabled="disabled" class="selectbox-option-group-1"&gt;----------------------&lt;/option&gt;
        &lt;option value="5" class="selectbox-option-group-1"&gt;SPSUI TF&lt;/option&gt;
        &lt;option value="6" class="selectbox-option-group-2"&gt;플래시UI1팀&lt;/option&gt; 
        &lt;option value="7" class="selectbox-option-group-2"&gt;플래시UI2팀&lt;/option&gt;
        &lt;option disabled="disabled" class="selectbox-option-group-2"&gt;----------------------&lt;/option&gt;
        &lt;option value="8" class="selectbox-option-group-2"&gt;RIA기술팀&lt;/option&gt;
        &lt;option value="9" class="selectbox-option-group-3"&gt;UI기술기획팀&lt;/option&gt;
        &lt;option value="10" class="selectbox-option-group-3"&gt;웹표준화팀&lt;/option&gt;
        &lt;option value="11" class="selectbox-option-group-3"&gt;오픈UI기술팀&lt;/option&gt;
        &lt;option value="12" class="selectbox-option-group-3"&gt;인터널서비스&lt;/option&gt;
    &lt;/select&gt;
    &lt;div class="selectbox-box"&gt;
        &lt;div class="selectbox-label"&gt;팀을 선택하세요&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="selectbox-layer"&gt;
        &lt;div class="selectbox-list"&gt;&lt;ul style="height: auto;"/&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

setOptionGroup("1")

&lt;!-- 수행 후 구조 --&gt;
&lt;div&gt;
    &lt;select class="selectbox-source"&gt;
        &lt;option value="0" class="selectbox-default"&gt;팀을 선택하세요&lt;/option&gt;
        &lt;option value="1" class="selectbox-option-group-1"&gt;Ajax UI1팀&lt;/option&gt;
        &lt;option value="2" class="selectbox-option-group-1"&gt;Ajax UI2팀&lt;/option&gt;
        &lt;option value="3" class="selectbox-option-group-1"&gt;Ajax UI3팀&lt;/option&gt;
        &lt;option value="4" class="selectbox-option-group-1"&gt;Ajax UI4팀&lt;/option&gt;
        &lt;option disabled="disabled" class="selectbox-option-group-1"&gt;----------------------&lt;/option&gt;
        &lt;option value="5" class="selectbox-option-group-1"&gt;SPSUI TF&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class="selectbox-source-option-group"&gt; &lt;!--옵션 그룹을 설정하기 위한 보이지 않는 select--&gt;
        &lt;option value="1" class="selectbox-option-group-1"&gt;Ajax UI1팀&lt;/option&gt;
        &lt;option value="2" class="selectbox-option-group-1"&gt;Ajax UI2팀&lt;/option&gt;
        &lt;option value="3" class="selectbox-option-group-1"&gt;Ajax UI3팀&lt;/option&gt;
        &lt;option value="4" class="selectbox-option-group-1"&gt;Ajax UI4팀&lt;/option&gt;
        &lt;option disabled="disabled" class="selectbox-option-group-1"&gt;----------------------&lt;/option&gt;
        &lt;option value="5" class="selectbox-option-group-1"&gt;SPSUI TF&lt;/option&gt;
        &lt;option value="6" class="selectbox-option-group-2"&gt;플래시UI1팀&lt;/option&gt; 
        &lt;option value="7" class="selectbox-option-group-2"&gt;플래시UI2팀&lt;/option&gt;
        &lt;option disabled="disabled" class="selectbox-option-group-2"&gt;----------------------&lt;/option&gt;
        &lt;option value="8" class="selectbox-option-group-2"&gt;RIA기술팀&lt;/option&gt;
        &lt;option value="9" class="selectbox-option-group-3"&gt;UI기술기획팀&lt;/option&gt;
        &lt;option value="10" class="selectbox-option-group-3"&gt;웹표준화팀&lt;/option&gt;
        &lt;option value="11" class="selectbox-option-group-3"&gt;오픈UI기술팀&lt;/option&gt;
        &lt;option value="12" class="selectbox-option-group-3"&gt;인터널서비스&lt;/option&gt;
    &lt;/select&gt;
    &lt;div class="selectbox-box"&gt;
        &lt;div class="selectbox-label"&gt;팀을 선택하세요&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="selectbox-layer"&gt;
        &lt;div class="selectbox-list"&gt;
            &lt;ul&gt;
                &lt;li class="selectbox-item"&gt;Ajax UI1팀&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;Ajax UI2팀&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;Ajax UI3팀&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;Ajax UI4팀&lt;/li&gt;
                &lt;li class="selectbox-item-disabled"&gt;----------------------&lt;/li&gt;
                &lt;li class="selectbox-item"&gt;SPSUI TF&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setSelectedIndex" class="method item">
	<h3>setSelectedIndex()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l537" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setSelectedIndex
(nIndex:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)</code></div>
	<div class="description"><p>nIndex번째 옵션을 선택한다.
disabled 된것에 대해 처리한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">nIndex</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">선택할 옵션의 순서 (0부터 시작)</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setValue" class="method item">
	<h3>setValue()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l515" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setValue
(sValue:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)</code></div>
	<div class="description"><p>SelectBox의 value를 설정한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sValue</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description"> </p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	
		<div class="tc-panel">
			<h2 id="event">이벤트 세부 정보</h2>
	        
	            <div id="event_blur" class="event item">
	<h3>blur
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l1229" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>셀렉트박스가 포커스를 잃으면 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// blur 커스텀 이벤트 핸들링
oSelectBox.attach("blur", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_change" class="event item">
	<h3>change
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l1201" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>선택한 아이템이 바뀌었을때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nIndex</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 옵션의 인덱스</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nLastIndex</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택되기 전의 옵션의 인덱스</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">oSelectBox.attach("change", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_click" class="event item">
	<h3>click
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l350" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>아이템을 클릭하면 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nIndex</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">클릭한 옵션의 인덱스</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">click 이벤트 객체</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">아이템이 선택되지 않도록 하기위해 호출하는 메서드</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// click 커스텀 이벤트 핸들링
oSelectBox.attach("click", function(oCustomEvent) { ... });
</code></pre><pre class="code"><code class="prettyprint">// 선택이 되지 않도록 처리
oSelectBox.attach("click", function(oCustomEvent) {
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_close" class="event item">
	<h3>close
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l274" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>레이어가 닫히기 직전 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">레이어가 닫히지 않게 하기위해 호출하는 메서드</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// close 커스텀 이벤트 핸들링
oSelectBox.attach("close", function(oCustomEvent) { ... });
</code></pre><pre class="code"><code class="prettyprint">// 레이어가 닫히지 않도록 처리
oSelectBox.attach("open", function(oCustomEvent) {
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_focus" class="event item">
	<h3>focus
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l1150" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>셀렉트박스가 포커스를 얻으면 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">포커스 되지않게 하기위해 호출하는 메서드</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// focus 커스텀 이벤트 핸들링
oSelectBox.attach("focus", function(oCustomEvent) { ... });
</code></pre><pre class="code"><code class="prettyprint">// 키보드 탭키로 포커스 되지 않도록 처리. select 엘리먼트의 blur()가 실행된다.
oSelectBox.attach("focus", function(oCustomEvent) {
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_open" class="event item">
	<h3>open
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.SelectBox.js.html#l239" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>레이어가 열리기 직전 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">레이어가 열리지 않게 하기위해 호출하는 메서드</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// open 커스텀 이벤트 핸들링
oSelectBox.attach("open", function(oCustomEvent) { ... });
</code></pre><pre class="code"><code class="prettyprint">// 레이어가 열리지 않도록 처리
oSelectBox.attach("open", function(oCustomEvent) {
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    

    
        <div class="tc-panel">
			<h2 id="demo">데모</h2>
			<div class="demo">
				<ul class="demo_list" id="demo_list">
		            
		                <li><a href="../../../demo/jindo.SelectBox/1. basic.html" id="demo_8be0657640d9d2d041a87a866a4157b2" title="가장&nbsp;기본적인&nbsp;사용&nbsp;예제입니다." target="_blank">기본&nbsp;예제</a></li>
		            
		                <li><a href="../../../demo/jindo.SelectBox/2. size.html" id="demo_175da1df450f03e523d1e367d476b4b3" title="셀렉트박스의&nbsp;가로&nbsp;크기와&nbsp;목록의&nbsp;세로&nbsp;크기를&nbsp;변경한&nbsp;예제입니다." target="_blank">너비,&nbsp;높이값&nbsp;지정</a></li>
		            
		                <li><a href="../../../demo/jindo.SelectBox/3. layerposition.html" id="demo_3658249e78c6023f4ca5cfd78aba4d48" title="레이어가&nbsp;뜨는&nbsp;위치를&nbsp;조정한&nbsp;예제입니다." target="_blank">레이어&nbsp;뜨는&nbsp;위치를&nbsp;조정</a></li>
		            
		                <li><a href="../../../demo/jindo.SelectBox/4. disabled.html" id="demo_253f22383b75c55e364c5c87ed03a46d" title="기본&nbsp;안내&nbsp;문구와&nbsp;선택&nbsp;할&nbsp;수&nbsp;없는&nbsp;항목을&nbsp;지정한&nbsp;예제입니다." target="_blank">기본&nbsp;안내문구와&nbsp;선택&nbsp;할&nbsp;수&nbsp;없는&nbsp;값</a></li>
		            
		                <li><a href="../../../demo/jindo.SelectBox/5. step.html" id="demo_f2d4228cfae63a2e2a9c91ac88a13ba2" title="단계별로&nbsp;선택하는&nbsp;예제입니다." target="_blank">단계별&nbsp;선택</a></li>
		            
		                <li><a href="../../../demo/jindo.SelectBox/6. html.html" id="demo_e7e278202fc3337b673210442383098e" title="선택&nbsp;목록을&nbsp;HTML&nbsp;로&nbsp;표현하는&nbsp;예제입니다." target="_blank">선택&nbsp;목록을&nbsp;HTML&nbsp;로&nbsp;표현</a></li>
		            
		                <li><a href="../../../demo/jindo.SelectBox/7. notclose.html" id="demo_3f9015916778abefab17d2d028487397" title="선택해도&nbsp;레이어가&nbsp;닫히지&nbsp;않도록&nbsp;옵션을&nbsp;지정한&nbsp;예제입니다." target="_blank">선택해도&nbsp;닫히지&nbsp;않는&nbsp;옵션&nbsp;지정</a></li>
		            
		                <li><a href="../../../demo/jindo.SelectBox/8. event.html" id="demo_ed6b2e6eadd93cd810bbbf34478f2eeb" title="change&nbsp;와&nbsp;open&nbsp;이벤트를&nbsp;활용하는&nbsp;예제입니다." target="_blank">커스텀&nbsp;이벤트</a></li>
		            
	            </ul>
				<div class="demo_example" id="demo_example">
					<div class="clipboard" style="display:block">
						<p class="description" id="demo_desc"></p>
						<iframe src="about:blank" id="demo_iframe" name="demo_iframe" width="100%" height="366" frameborder="0"></iframe>
					</div>
				</div>
				<button type="button" id="btn_external" class="btn_external">새창으로 열기</button>
			</div>
        </div>
    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>